<template>
	<view class="main-container">
		<view class="main-container-content">
			<view class="customer-container-card">
				<view class="customer-container">
					<view class="customer-container-context">
						<view style="display: flex;">
							<view class="customerInfo-head-img">
								<image :src="customerInfo.HeadImg" style="width: 120rpx;height: 120rpx;border-radius: 20rpx;" class="header-img"></image>
							</view>
							<view class="customerInfo-head-context">
								<view>{{ customerInfo.NickName }}</view>
								<view class="number">{{ customerInfo.UserNumber }}</view>
							</view>
						</view>
						<view class="choose-coupon-cantainer"><view class="choose-coupon" v-show="customerInfo.Id" @click="chooseCoupon">选择优惠券</view></view>
					</view>
				</view>
			</view>
			<view class="select-coupon-container" v-if="selectedCouponList.length > 0">
				<view class="select-coupon-container-list">
					<view v-for="(item, index) in selectedCouponList" :key="item.CouponId" class="select-coupon-item">
						<view class="delete-coupon" @click="deleteSelectConpon(item)"></view>
						<view class="customer-coupon-item-context">
							<view class="context-left">
								<view class="coupon-left-container">
									<view style="margin-top: 30rpx; margin-bottom: 20rpx;">
										<text class="coupon-amout-unit">￥</text>
										<text class="coupon-amout">{{ item.Amount }}</text>
									</view>
									<view class="coupon-min">满{{ item.Min }}元可用</view>
								</view>
							</view>
							<view class="context-middle">
								<view class="context-middle-context">
									<view style="margin-bottom: 20rpx;">
										<text class="coupon-type-name">{{ item.TypeName }}</text>
									</view>
									<view class="coupon-name">{{ item.Name }}</view>
								</view>
							</view>
							<view class="context-right">
								<view class="select-right-container">
									{{ item.Count }}
									<view class="unit">张</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-operation-container" v-show="detaileInfo.CustomerStoreCouponStatus == 1">
			<button class="confirm-btn-submit bottom-change-view" :loading="submitUploadStatus" :disabled="submitUploadStatus" @click="$noMultipleClicks(sumbitProvideCoupon)">
				发放优惠券
			</button>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="coupon-list-cantainer">
				<scroll-view scroll-y class="scroll-view_list" v-if="couponList.length > 0" @scrolltolower="addSearchStoreCouponNew">
					<view class="coupon-list-cantainer-list">
						<view
							v-for="(item, index) in couponList"
							:key="item.Id"
							@click="clickItem(item)"
							class="customer-coupon-item"
							:style="{ backgroundImage: 'url( ' + couponImg + ' )' }"
						>
							<view class="customer-coupon-item-context">
								<view class="context-left">
									<view class="coupon-left-container">
										<view style="margin-top: 30rpx; margin-bottom: 20rpx;">
											<text class="coupon-amout-unit">￥</text>
											<text class="coupon-amout">{{ item.Amount }}</text>
										</view>
										<view class="coupon-min">满{{ item.Min }}元可用</view>
									</view>
								</view>
								<view class="context-middle">
									<view class="context-middle-context">
										<view style="margin-bottom: 20rpx;">
											<text class="coupon-type-name">{{ item.TypeName }}</text>
										</view>
										<view class="coupon-name">{{ item.Name }}</view>
										<view class="coupon-time-container">剩余数量：{{ item.Inventory }}张</view>
									</view>
								</view>
								<view class="context-right">
									<view class="context-right-container">
										<view class="fasong-img"><image :src="faSongIcon"></image></view>
										<view class="text">发放</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view v-else class="sell-container ">
					<view class="empty"><text>抱歉！没有找到符合条件的优惠券</text></view>
				</view>
				<view class="bottom-operation-container-cancel" @click="closeChoosePopup">取消</view>
			</view>
		</uni-popup>
		<prompt
			:isMutipleLine="false"
			:visible.sync="promptVisible"
			inputStyle=""
			inputType="number"
			title="发放优惠券"
			placeholder="请输入数量"
			defaultValue="1"
			mainColor="#e74a39"
			maxlength="3"
			@confirm="clickPromptConfirm"
		>
			<view>{{ selectCouponInfo.Name }}</view>
		</prompt>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import Prompt from '@/components/zz-prompt/index.vue';
import couponImg from '@/static/images/coupon-img.png';
import { errorToShow, modelShow, successToShow } from '@/config/common.js';
import { getCustomerInfoByUserNumber, searchStoreCouponNew, wechatProvideCoupon } from '@/constant/customer.js';
import { checkValIsNumber } from '@/config/utils.js';
import faSongIcon from '@/static/images/fasong-icon.png';
export default {
	components: {
		Prompt
	},
	data() {
		return {
			userNumber: '',
			promptVisible: false,
			submitUploadStatus: false,
			couponImg: couponImg,
			customerInfo: {},
			couponList: [],
			faSongIcon: faSongIcon,
			query_filter: {
				loginCustomerId: uni.getStorageSync('customerId'),
				pageIndex: 0,
				pageSize: 6
			},
			selectedCouponList: [],
			totalNumber: 0,
			selectCouponInfo: {
				Name: '',
				CouponId: '',
				Count: '',
				Amount: '',
				Min: '',
				TypeName: ''
			}
		};
	},
	onLoad: function(option) {
		this.initCustomerData(option);
		this.searchStoreCouponNew();
	},
	methods: {
		async initCustomerData(option) {
			this.userNumber = option.userNumber;
			if (!this.userNumber) {
				errorToShow('获取用户编号失败,请重新获取');
				return;
			}
			try {
				this.customerInfo = await getCustomerInfoByUserNumber({ UserNumber: this.userNumber });
			} catch {
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		addSearchStoreCouponNew(e) {
			this.query_filter.pageIndex++;
			this.searchStoreCouponNew();
		},
		async searchStoreCouponNew() {
			const { Source, TotalNumber } = await searchStoreCouponNew(this.query_filter);
			this.totalNumber = TotalNumber;
			if (Source.length > 0) {
				this.couponList.push(...Source);
			}
		},
		chooseCoupon() {
			this.$refs.popup.open();
		},
		closeChoosePopup() {
			this.$refs.popup.close();
		},
		clickItem(item) {
			this.promptVisible = true;
			this.selectCouponInfo.Name = item.Name;
			this.selectCouponInfo.CouponId = item.Id;
			this.selectCouponInfo.Amount = item.Amount;
			this.selectCouponInfo.Min = item.Min;
			this.selectCouponInfo.TypeName = item.TypeName;
			this.closeChoosePopup();
		},
		clickPromptConfirm(val) {
			if (!checkValIsNumber(val)) {
				errorToShow('请输入正整数');
				return;
			}
			this.selectCouponInfo.Count = val;
			let deepItem = { ...this.selectCouponInfo };
			if (this.selectedCouponList.length > 0) {
				let innerCoupon = this.selectedCouponList.find(item => item.CouponId == this.selectCouponInfo.CouponId);
				if (innerCoupon) {
					innerCoupon.Count = this.selectCouponInfo.Count;
				} else {
					this.selectedCouponList.push(deepItem);
				}
			} else {
				this.selectedCouponList.push(deepItem);
			}
			this.clearSelectCouponInfo();
			this.promptVisible = false;
		},
		clearSelectCouponInfo() {
			this.selectCouponInfo = {
				Name: '',
				CouponId: '',
				Count: '',
				Amount: ''
			};
		},
		deleteSelectConpon(item) {
			const _that = this;
			modelShow('提示', '确定要删除该优惠券吗？', function() {
				_that.selectedCouponList = _that.selectedCouponList.filter(innerObj => innerObj.CouponId != item.CouponId);
			});
		},
		async sumbitProvideCoupon() {
			let postData = {
				CustomerId: this.customerInfo.Id,
				WechatProvideCouponItemList: []
			};
			postData.WechatProvideCouponItemList = this.selectedCouponList;
			if (!postData.CustomerId) {
				errorToShow('请选择客户');
				return;
			}
			if (postData.WechatProvideCouponItemList.length == 0) {
				errorToShow('请至少选择一种优惠券');
				return;
			}
			try {
				const _that = this;
				modelShow('提示', '确定要发放优惠券吗？', async function() {
					_that.submitUploadStatus = true;
					await wechatProvideCoupon(postData);
					successToShow('发放成功', function() {
						uni.navigateBack();
					});
				});
			} catch {
				this.submitUploadStatus = false;
			}
		}
	}
};
</script>

<style scoped>
button::after {
	content: ' ';
	border-radius: unset;
	border: unset;
}
</style>

<style scoped lang="scss">
.main-container {
	background-color: #fff;
	height: 100vh;
}

.customer-container {
	width: 96%;
	height: 207rpx;
	border-radius: 19rpx;
	//box-shadow: darkgrey 0px 2px 6px 0px;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	background-color: #fff;
	&-context {
		display: flex;
		width: 100%;
		justify-content: space-between;
		.customerInfo-head-img {
			margin-left: 20rpx;
			margin-right: 20rpx;
			text-align: center;
		}
		.customerInfo-head-context {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			color: #333;
			font-size: $main-text-size-30;

			.number {
				font-size: $main-text-size-26;
				color: $main-text-color-gray-black;
			}
		}
	}
}

.customer-container-card {
	width: 100%;
	display: flex;
	justify-content: center;
}

.choose-coupon-cantainer {
	margin-right: 20rpx;
	display: flex;
	align-items: center;
	.choose-coupon {
		color: $main-text-color-main-orange;
		padding: 14rpx;
		border: 1px solid $main-btn-orange-color;
		border-radius: 12rpx;
		font-size: $main-text-size-24;
	}
}

.coupon-list-cantainer {
	width: 100%;
	height: 90vh;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	position: absolute;
	bottom: 0;
}

.coupon-list-cantainer-list {
	padding: 20rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.coupon-detail-main {
	width: 49%;
	height: 216rpx;
}
.empty {
	height: 320rpx;
	line-height: 320rpx;
	text-align: center;
	color: #b5b5b7;
	width: 750rpx;
}

.scroll-view_list {
	height: calc(100% - 100rpx);
	width: unset;
	background-color: $main-page-color;
}

.customer-coupon-item {
	position: relative;
	margin-bottom: 20rpx;
	width: 100%;
	height: 210rpx;
	margin-right: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.customer-coupon-item-context {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.context-left {
	width: 32vw;
	height: 100%;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	.coupon-min {
		font-size: $main-text-size-24;
		padding-top: 20rpx;
		border-top: 2rpx dashed;
	}
	.coupon-amout {
		font-size: 60rpx;
	}

	.coupon-amout-unit {
		font-size: $main-text-size-24;
	}

	.coupon-left-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.coupon-left-line {
			width: 78rpx;
			border-top: 2rpx dashed;
			margin-bottom: 20rpx;
		}
	}
}

.context-middle {
	height: 100%;
	width: calc(100vw - 33vw - 120rpx);

	&-context {
		margin-left: 20rpx;
		margin-top: 24rpx;

		.coupon-type-name {
			padding: 4rpx;
			padding-left: 12rpx;
			background-color: #ed5875;
			color: #fff;
			border-radius: 6rpx;
			padding-right: 12rpx;
			font-size: $main-text-size-24;
		}

		.coupon-name {
			font-size: $main-text-size-32;
			margin-bottom: 26rpx;
			font-weight: 600;
			color: $main-text-color-gray-black;
		}
		.coupon-time-container {
			font-size: $main-text-size-24;
			color: $main-text-color-grey;
		}
	}
}

.select-right-container {
	flex-direction: row;
	color: #333;
	font-size: 45rpx;
	align-items: baseline;
	display: flex;
	width: 100%;
	justify-content: center;
	border-left: 2rpx solid $main-line-color-split;
	.unit {
		color: #999;
		font-size: 20rpx;
		margin-left: 6rpx;
	}
}

.context-right {
	height: 100%;
	width: 120rpx;
	display: flex;
	justify-content: center;
	align-items: center;

	.context-right-container {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		width: 100%;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		border-left: 2rpx solid $main-line-color-split;

		.fasong-img {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 10rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			font-size: $main-text-size-20;
			color: $main-text-color-gray-black;
		}
	}
}

.bottom-operation-container-cancel {
	height: 120rpx;
	line-height: 120rpx;
	width: 100%;
	background-color: #ffffff;
	position: absolute;
	bottom: 0;
	color: $main-text-color-grey;
	text-align: center;
}

.bottom-operation-container {
	display: flex;
	height: 120rpx;
	line-height: 120rpx;
	width: 100%;
	align-items: center;
	justify-content: space-around;
	background-color: #ffffff;
	position: absolute;
	bottom: 0;
}

.bottom-middle-line {
	width: 2rpx;
	height: 100%;
	background-color: $main-line-color-split;
}
.bottom-operatio-btn {
	display: flex;
	justify-content: center;
	width: 90%;
	color: $main-text-color-blue;
}
.confirm-btn-submit {
	bottom: 0;
	background-color: #fff;
	font-size: 30rpx;
	color: #FFFFFF;
	width: 100vw;
	line-height: 120rpx;
	height: 120rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: unset;
}
.select-coupon-container {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 20rpx;
	&-list {
		width: 96%;
		padding: 0 20rpx;
	}
}
.main-container-content {
	height: calc(100% - 120rpx);
	overflow-y: auto;
	background-color: $main-page-color;
}
.select-coupon-item {
	background: url(@/static/images/coupon-img.png) no-repeat;
	background-size: 100% 100%;
	height: 206rpx;
	margin-bottom: 10rpx;
	position: relative;
	.delete-coupon {
		background: url(@/static/images/delete-coupon.png) no-repeat 50% 50%;
		width: 60rpx;
		height: 60rpx;
		background-size: 40rpx 40rpx;
		position: absolute;
		right: 16rpx;
		top: 0;
		text-align: center;
		z-index: 2;
	}
}
</style>
